<template>
  <div>
    <MyTable :data="list">
      <template v-slot:default="{ id }">
          <!-- {{slotProps}} -->
          <button @click="del(id)">删除</button>
      </template>
    </MyTable>
    
    <MyTable :data="list2">
      <template #default="{ item }">
        <button @click="showItem(item)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  data () {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    }
  },
  methods:{
    del(id){
      console.log(id)
      // filter过滤，留下el.id不等于传过来的id的元素
      this.list = this.list.filter(el =>el.id !==id)
    },
    showItem(item){
      alert(JSON.stringify(item))
    }
  },
  components: {
    MyTable
  }
}
</script>
